<template>
  <div class="demo">
    <Row :gutter="16" :wrap="false">
      <Col flex="none">
        <Space direction="vertical" align="center">
          <!-- Primary Color -->
          <input
            type="color"
            :value="colorState.primaryColor"
            @input="(e) => onColorChange('primaryColor', e)"
          />
          <span style="color: var(--sscd-primary-color)">var(`--sscd-primary-color`)</span>
          <!-- Error Color -->
          <input
            type="color"
            :value="colorState.errorColor"
            @input="(e) => onColorChange('errorColor', e)"
          />
          <span style="color: var(--sscd-danger-color)">var(`--sscd-danger-color`)</span>
          <!-- Warning Color -->
          <input
            type="color"
            :value="colorState.warningColor"
            @input="(e) => onColorChange('warningColor', e)"
          />
          <span style="color: var(--sscd-warning-color)">var(`--sscd-warning-color`)</span>
          <!-- Success Color -->
          <input
            type="color"
            :value="colorState.successColor"
            @input="(e) => onColorChange('successColor', e)"
          />
          <span style="color: var(--sscd-success-color)">var(`--sscd-success-color`)</span>
          <!-- Info Color -->
          <input
            type="color"
            :value="colorState.infoColor"
            @input="(e) => onColorChange('infoColor', e)"
          />
          <span style="color: var(--sscd-primary-color)">var(`--sscd-primary-color`)</span>
        </Space>
      </Col>
      <Col flex="auto">
        <Space direction="vertical" style="width: 100%" :size="0">
          <template #split><Divider /></template>
          <!-- Primary Button -->
          <Space>
            <Button type="primary">Primary</Button>
            <Button>Default</Button>
            <Button type="dashed">Dashed</Button>
            <Button type="text">Text</Button>
            <Button type="link">Link</Button>
          </Space>
          <!-- Danger Button -->
          <Space>
            <Button danger type="primary">Primary</Button>
            <Button danger>Default</Button>
            <Button danger type="dashed">Dashed</Button>
            <Button danger type="text">Text</Button>
            <Button danger type="link">Link</Button>
          </Space>
          <!-- Ghost Button -->
          <Space style="background: rgb(190, 200, 200)">
            <Button type="primary" ghost>Primary</Button>
            <Button ghost>Default</Button>
            <Button type="dashed" ghost>Dashed</Button>
            <Button type="primary" ghost danger>Primary</Button>
            <Button ghost danger>Default</Button>
            <Button type="dashed" ghost danger>Dashed</Button>
          </Space>
          <!-- Typography -->
          <Space>
            <Typography.Text type="success">Text (success)</Typography.Text>
            <Typography.Text type="warning">Text(warning)</Typography.Text>
            <Typography.Text type="danger">Text(danger)</Typography.Text>
            <Typography.Text copyable>Text</Typography.Text>
            <!-- Dropdown -->
            <Dropdown>
              <template #overlay>
                <Menu>
                  <Menu.Item>1st menu item</Menu.Item>
                  <Menu.Item danger>a danger item</Menu.Item>
                </Menu>
              </template>
              <a class="ant-dropdown-link" @click.prevent>
                Hover me
                <DownOutlined />
              </a>
            </Dropdown>
            <!-- Spin -->
            <Spin />
          </Space>
          <!-- Menu - horizontal -->
          <Row :gutter="16">
            <Col :span="12">
              <Menu v-model:selectedKeys="selectedKeys" mode="horizontal">
                <Menu.Item key="mail">
                  Mail
                  <template #icon>
                    <MailOutlined />
                  </template>
                </Menu.Item>
                <Menu.SubMenu key="SubMenu" title="Submenu">
                  <template #icon><SettingOutlined /></template>
                  <Menu.Group title="Item 1">
                    <Menu.Item key="setting:1">Option 1</Menu.Item>
                    <Menu.Item key="setting:2">Option 2</Menu.Item>
                  </Menu.Group>
                </Menu.SubMenu>
              </Menu>
            </Col>
            <Col :span="12">
              <Menu v-model:selectedKeys="selectedKeys" mode="horizontal" theme="dark">
                <Menu.Item key="mail">
                  <template #icon><SettingOutlined /></template>
                  Mail
                </Menu.Item>
                <Menu.SubMenu key="SubMenu" title="Submenu">
                  <template #icon><SettingOutlined /></template>
                  <Menu.Group title="Item 1">
                    <Menu.Item key="setting:1">Option 1</Menu.Item>
                    <Menu.Item key="setting:2">Option 2</Menu.Item>
                  </Menu.Group>
                </Menu.SubMenu>
              </Menu>
            </Col>
          </Row>
          <!-- Menu - vertical -->
          <Row :gutter="16">
            <Col :span="12">
              <Menu v-model:selectedKeys="selectedKeys" mode="inline">
                <Menu.Item key="mail">
                  <template #icon><MailOutlined /></template>
                  Mail
                </Menu.Item>
                <Menu.SubMenu key="SubMenu" title="Submenu">
                  <template #icon><SettingOutlined /></template>
                  <Menu.Group title="Item 1">
                    <Menu.Item key="setting:1">Option 1</Menu.Item>
                    <Menu.Item key="setting:2">Option 2</Menu.Item>
                  </Menu.Group>
                </Menu.SubMenu>
              </Menu>
            </Col>
            <Col :span="12">
              <Menu v-model:selectedKeys="selectedKeys" mode="vertical" theme="dark">
                <Menu.Item key="mail">
                  <template #icon><MailOutlined /></template>
                  Mail
                </Menu.Item>
                <Menu.SubMenu key="SubMenu" title="Submenu">
                  <template #icon><SettingOutlined /></template>
                  <Menu.Group title="Item 1">
                    <Menu.Item key="setting:1">Option 1</Menu.Item>
                    <Menu.Item key="setting:2">Option 2</Menu.Item>
                  </Menu.Group>
                </Menu.SubMenu>
              </Menu>
            </Col>
          </Row>
          <!-- Pagination -->
          <Pagination show-quick-jumper :default-current="2" :total="500" />
          <!-- Steps -->
          <Steps :current="1" :percent="60">
            <Steps.Step title="Finished" description="This is a description." />
            <Steps.Step
              title="In Progress"
              sub-title="Left 00:00:08"
              description="This is a description."
            />
            <Steps.Step title="Waiting" description="This is a description." />
          </Steps>
          <!-- Steps - dot -->
          <Steps :current="2" status="error" progress-dot>
            <Steps.Step title="Finished" description="You can hover on the dot." />
            <Steps.Step title="In Progress" description="You can hover on the dot." />
            <Steps.Step title="Error" description="You can hover on the dot." />
            <Steps.Step title="Waiting" description="You can hover on the dot." />
          </Steps>
          <!-- Form - Input -->
          <Form>
            <Space>
              <Form.Item>
                <Input v-bind="inputProps" />
              </Form.Item>
              <Form.Item has-feedback validate-status="success">
                <Input v-bind="inputProps" />
              </Form.Item>
              <Form.Item has-feedback validate-status="warning">
                <Input v-bind="inputProps" />
              </Form.Item>
              <Form.Item has-feedback validate-status="error">
                <Input v-bind="inputProps" />
              </Form.Item>
              <Form.Item has-feedback validate-status="validating">
                <Input v-bind="inputProps" />
              </Form.Item>
            </Space>
          </Form>
          <!-- Form - Select -->
          <Form>
            <Space>
              <Form.Item>
                <Select v-bind="selectProps" />
              </Form.Item>
              <Form.Item has-feedback validate-status="success">
                <Select v-bind="selectProps" />
              </Form.Item>
              <Form.Item has-feedback validate-status="warning">
                <Select v-bind="selectProps" />
              </Form.Item>
              <Form.Item has-feedback validate-status="error">
                <Select v-bind="selectProps" />
              </Form.Item>
              <Form.Item has-feedback validate-status="validating">
                <Select v-bind="selectProps" />
              </Form.Item>
            </Space>
          </Form>
          <!-- Form - TreeSelect -->
          <Form>
            <Space>
              <Form.Item>
                <TreeSelect v-bind="treeSelectProps" />
              </Form.Item>
              <Form.Item has-feedback validate-status="success">
                <TreeSelect v-bind="treeSelectProps" />
              </Form.Item>
              <Form.Item has-feedback validate-status="warning">
                <TreeSelect v-bind="treeSelectProps" />
              </Form.Item>
              <Form.Item has-feedback validate-status="error">
                <TreeSelect v-bind="treeSelectProps" />
              </Form.Item>
              <Form.Item has-feedback validate-status="validating">
                <TreeSelect v-bind="treeSelectProps" />
              </Form.Item>
            </Space>
          </Form>
          <!-- Form - InputNumber -->
          <Form>
            <Space>
              <Form.Item>
                <InputNumber />
              </Form.Item>
              <Form.Item has-feedback validate-status="success">
                <InputNumber />
              </Form.Item>
              <Form.Item has-feedback validate-status="warning">
                <InputNumber />
              </Form.Item>
              <Form.Item has-feedback validate-status="error">
                <InputNumber />
              </Form.Item>
              <Form.Item has-feedback validate-status="validating">
                <InputNumber />
              </Form.Item>
            </Space>
          </Form>
          <!-- Form - DatePicker -->
          <Form>
            <Space>
              <Form.Item>
                <DatePicker />
              </Form.Item>
              <Form.Item has-feedback validate-status="success">
                <DatePicker />
              </Form.Item>
              <Form.Item has-feedback validate-status="warning">
                <DatePicker />
              </Form.Item>
              <Form.Item has-feedback validate-status="error">
                <DatePicker />
              </Form.Item>
              <Form.Item has-feedback validate-status="validating">
                <DatePicker />
              </Form.Item>
            </Space>
          </Form>
          <Space>
            <Checkbox>Checkbox</Checkbox>
            <Radio.Group default-value="bamboo">
              <Radio value="bamboo">Bamboo</Radio>
              <Radio value="light">Light</Radio>
              <Radio value="little">Little</Radio>
            </Radio.Group>
            <Mentions placeholder="Mention by @">
              <Mentions.Option value="afc163">afc163</Mentions.Option>
              <Mentions.Option value="zombieJ">zombieJ</Mentions.Option>
              <Mentions.Option value="yesmeck">yesmeck</Mentions.Option>
            </Mentions>
            <Slider :default-value="30" style="width: 100px" />
            <Switch default-checked />
          </Space>
          <Space>
            <DatePicker.RangePicker />
            <TimePicker.TimeRangePicker />
          </Space>
          <Row :gutter="16">
            <Col :span="8">
              <!-- Card -->
              <Card style="width: 100%" :tab-list="carTabListNoTitle">
                <template #tabBarExtraContent>
                  <a href="#">More</a>
                </template>
              </Card>
            </Col>
            <Col :span="8">
              <!-- Table -->
              <Table
                size="small"
                bordered
                :row-selection="{}"
                :columns="[
                  {
                    title: 'Key',
                    dataIndex: 'key',
                    filters: [{ text: 'Little', value: 'little' }],
                    sorter: (a, b) => a.key.length - b.key.length,
                  },
                ]"
                :data-source="[{ key: 'Bamboo' }, { key: 'Light' }, { key: 'Little' }]"
              />
            </Col>
            <Col :span="8">
              <!-- Table -->
              <Tabs default-active-key="1">
                <Tabs.TabPane key="1" tab="Tab 1">Content of Tab Pane 1</Tabs.TabPane>
                <Tabs.TabPane key="2" tab="Tab 2">Content of Tab Pane 2</Tabs.TabPane>
                <Tabs.TabPane key="3" tab="Tab 3">Content of Tab Pane 3</Tabs.TabPane>
              </Tabs>
            </Col>
          </Row>
          <Space>
            <Tag color="success">success</Tag>
            <Tag color="processing">processing</Tag>
            <Tag color="error">error</Tag>
            <Tag color="warning">warning</Tag>
            <Tag color="default">default</Tag>
          </Space>
          <Row :gutter="16">
            <Col :span="16">
              <Timeline mode="alternate">
                <Timeline.Item>Create a services site 2015-09-01</Timeline.Item>
                <Timeline.Item color="gray">
                  Solve initial network problems 2015-09-01
                </Timeline.Item>
                <Timeline.Item>
                  <template #dot>
                    <ClockCircleOutlined style="font-size: 16px" />
                  </template>
                  Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
                  doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore
                  veritatis et quasi architecto beatae vitae dicta sunt explicabo.
                </Timeline.Item>
              </Timeline>
            </Col>
            <Col :span="8">
              <Tree :tree-data="treeData" :height="200" default-expand-all checkable />
            </Col>
          </Row>
          <!-- Alert -->
          <Row :gutter="16">
            <Col :span="6">
              <Alert show-icon message="Success Text" type="success" />
            </Col>
            <Col :span="6">
              <Alert show-icon message="Info Text" type="info" />
            </Col>
            <Col :span="6">
              <Alert show-icon message="Warning Text" type="warning" />
            </Col>
            <Col :span="6">
              <Alert show-icon message="Error Text" type="error" />
            </Col>
          </Row>
          <!-- Progress -->
          <Row :gutter="16">
            <Col flex="auto">
              <Progress :percent="30" />
              <Progress :percent="70" status="exception" />
              <Progress :percent="100" />
            </Col>
            <Col flex="none">
              <Progress type="circle" :percent="75" />
              <Progress type="circle" :percent="70" status="exception" />
              <Progress type="circle" :percent="100" />
            </Col>
          </Row>
          <Transfer :data-source="transferData" :target-keys="['18']" :selected-keys="['3']">
            <template #render="item">{{ item.title }}</template>
          </Transfer>
        </Space>
      </Col>
    </Row>
  </div>
</template>
<script lang="ts" setup>
  import { reactive, ref } from 'vue';
  import {
    DownOutlined,
    MailOutlined,
    SettingOutlined,
    ClockCircleOutlined,
  } from '@ant-design/icons-vue';
  import Alert from '@sscd/alert';
  import Button from '@sscd/button';
  import Card from '@sscd/card';
  import Checkbox from '@sscd/checkbox';
  import { themeEnum } from '@sscd/common';
  import DatePicker from '@sscd/date-picker';
  import Divider from '@sscd/divider';
  import Dropdown from '@sscd/dropdown';
  import Form from '@sscd/form';
  import { Col, Row } from '@sscd/grid';
  import Input from '@sscd/input';
  import InputNumber from '@sscd/input-number';
  import Mentions from '@sscd/mentions';
  import Menu from '@sscd/menu';
  import Pagination from '@sscd/pagination';
  import Progress from '@sscd/progress';
  import Radio from '@sscd/radio';
  import Select from '@sscd/select';
  import Slider from '@sscd/slider';
  import Space from '@sscd/space';
  import Spin from '@sscd/spin';
  import Steps from '@sscd/steps';
  import Switch from '@sscd/switch';
  import Table from '@sscd/table';
  import Tabs from '@sscd/tabs';
  import Tag from '@sscd/tag';
  import TimePicker from '@sscd/time-picker';
  import Timeline from '@sscd/timeline';
  import Transfer from '@sscd/transfer';
  import Tree from '@sscd/tree';
  import TreeSelect from '@sscd/tree-select';
  import Typography from '@sscd/typography';
  import type { TreeSelectProps } from '@sscd/tree-select';
  import ConfigProvider from '@sscd/config-provider';
  const inputProps = {
    style: { width: '128px' },
  };
  const selectProps = {
    ...inputProps,
    options: [
      { value: 'light', label: 'Light' },
      { value: 'bamboo', label: 'Bamboo' },
      { value: 'little', label: 'Little' },
    ],
  };
  const treeData = [
    {
      value: 'little',
      key: 'little',
      label: 'Little',
      title: 'Little',
      children: [
        { value: 'light', key: 'light', label: 'Light', title: 'Light' },
        { value: 'bamboo', key: 'bamboo', label: 'Bamboo', title: 'Bamboo' },
      ],
    },
  ];
  const treeSelectProps: TreeSelectProps = {
    ...inputProps,
    treeCheckable: true,
    maxTagCount: 'responsive',
    treeData,
  };
  const carTabListNoTitle = [
    { key: 'article', tab: 'article' },
    { key: 'app', tab: 'app' },
    { key: 'project', tab: 'project' },
  ];
  const transferData = [];
  for (let i = 0; i < 20; i++) {
    transferData.push({
      key: i.toString(),
      title: `content${i + 1}`,
      description: `description of content${i + 1}`,
    });
  }
  const colorState = reactive({
    primaryColor: themeEnum.SSCD_PRIMARY_COLOR,
    errorColor: themeEnum.SSCD_DANGER_COLOR,
    warningColor: themeEnum.SSCD_WARNING_COLOR,
    successColor: themeEnum.SSCD_SUCCESS_COLOR,
    infoColor: themeEnum.SSCD_PRIMARY_COLOR,
  });
  const onColorChange = (type: string, e: any) => {
    Object.assign(colorState, { [type]: e.target.value });
    ConfigProvider.config({
      theme: colorState,
    });
  };
  const selectedKeys = ref(['mail']);
</script>